import { createWebHistory, createWebHashHistory, createRouter } from 'vue-router'
import { START_LOCATION } from 'vue-router'

import HomeView from './views/HomeView.vue'
import AboutView from './views/AboutView.vue'
import UserPost from './views/UserPost.vue'

// -------嵌套路由 start-------------------------------------
import User from './views/qiantaoRouter/User.vue'
import UserHome from './views/qiantaoRouter/UserHome.vue'
import UserProfile from './views/qiantaoRouter/UserProfile.vue'
import UserPosts from './views/qiantaoRouter/UserPosts.vue'
// -------嵌套路由 end-------------------------------------

// 路由传参方式
import Article from './views/routerChuanCan/index.vue'
import ProductWrapper from './views/routerChuanCan/ProductWrapper.vue'

const baseRoutes = [
	// 重定向和别名
  { path: '/', component: HomeView },
	
  //{ path: '/about', component: AboutView },
  { path: '/users/:id', component: AboutView },
	{ path: '/users/:username/posts/:postId', name: "动态路由匹配", component: UserPost },
	
	// 将匹配所有内容并将其放在 `route.params.pathMatch` 下
	{ path: '/test/:pathMatch(.*)*', name: 'NotFound', component: () => import('./views/NotFound.vue') },
	// 将匹配以 `/user-` 开头的所有内容，并将其放在 `route.params.afterUser` 下
	// { path: '/user-:afterUser(.*)', component: UserGeneric },
	
	
	// 嵌套路由
	{
		path: '/user/:username',
		name: 'user-parent',
		component: User,
		children: [
			// 当 /user/:username 匹配成功
			// UserHome 将被渲染到 User 的 <router-view> 内部
			{ path: '', name: 'user', component: UserHome },

			// 当 /user/:username/profile 匹配成功
			// UserProfile 将被渲染到 User 的 <router-view> 内部
			{ path: 'profile', name: 'user.profile', component: UserProfile },

			{ path: 'posts', name: 'user.posts', component: UserPosts },
		],
	},
	{
		path: '/admin',
		name: '忽略父组件',
		children: [
			{ path: 'users', component: UserPosts },
		],
	},
	
	// 重定向和别名
	{ path: '/home', name: '从 /home 重定向到 /', redirect: '/' },
	{ path: '/home1', name: '别名 定向到 /', component: HomeView, alias: '/bieming' },
	
	// 路由传参方式
	{
	  path: '/article/:id',
	  component: Article,
	  props: route => ({
	    // id: route.params.id,
	    highlight: !!route.query.highlight
	  })
	},
	{
	  path: '/product/:id',
	  component: ProductWrapper, // 使用包装组件
	  props: route => ({
	    id: route.params.id // 只传递基本路由参数
	  })
	},
	
	// 异步组件
	{
	  path: '/async-component',
	  component: () => import('./views/asyncComponent/index.vue') 
	},
	
	// 滚动行为 scrollBehavior 验证
	{
	  path: '/scrollBehavior',
		hash: '#team', 
	  component: () => import('./views/scrollBehavior.vue') 
	},
	
	// useLink
	{
	  path: '/useLink',
	  component: () => import('./views/use/useLink.vue') 
	},
	
	// Tailwind CSS
	{
	  path: '/tailwind',
	  component: () => import('./views/tailwind.vue') 
	},
	
	// 验证导航故障
	{
	  path: '/navigation-failure',
	  component: () => import('./views/NavigationFailure.vue') 
	},
	
	// 浏览器窗口状态监听（document.visibilityState）
	{
	  path: '/document-visibilityState',
	  component: () => import('./views/dom.vue') 
	},
	
	// 集成 Vue-Audio-Visual 音频可视化组件库
	{
	  path: '/vueAudioVisual',
	  component: () => import('./views/vueAudioVisual.vue') 
	},
]

// 二、路由导航 + kepp-alivex
import ComponentA from './views/router/ComponentA.vue'
import ComponentB from './views/router/ComponentB.vue'
const extraRoutes = [
  {
    path: '/a',
    component: ComponentA,
    meta: { keepAlive: true }
  },
  {
    path: '/b',
    component: () => import('./views/router/ComponentB.vue'),
    meta: { keepAlive: true }
  }
]

// 使用 对象展开运算符（...）来合并对象。这种方法在处理 动态路由 或 基于条件添加路由 时特别有用。
const allRoutes = [...baseRoutes, ...extraRoutes];
const router = createRouter({
  history: createWebHashHistory(),
  // routes: baseRoutes,
	routes: allRoutes,
	scrollBehavior(to, from, savedPosition) {
		// console.log(to, from, savedPosition);
		if (to.hash) {
			return {
				el: to.hash,
				behavior: 'smooth' // 启用平滑滚动
			}
		} else if (savedPosition) {
			return savedPosition
		} else {
			return { top: 0 }
		}
	},
})

router.beforeEach((to, from, next) => {
	// console.log(to, from, next)
	if (from === START_LOCATION) {
		// 初始导航
		console.log('初始导航: ', START_LOCATION)
		// alert('初始导航')
	}
  if (to.path == "/home1") { // 人为设置 导航故障
    next(false) 
  } else {
    next()
  }
})

// 全局导航故障
router.afterEach((to, from, failure) => {
  if (failure) {
    console.log(to, from, failure)
		alert("全局导航故障~~~")
  }
})

export default router